<template>
	<view>
		<view class="cd_top">
			<view class="cd_top_contain1"></view>
			<view class="cd_top_contain">
				<text>{{obj.name}}</text>
				<text> 满{{ fen2yuan(obj.usePrice) }}元，{{obj.discountType === 1 ? '减 ' + fen2yuan(obj.discountPrice) + ' 元': '打 ' + obj.discountPercent / 10.0 + ' 折'}}</text>
				<view :class="obj.status==3||obj.status==2?'dark':'ligth'" @click="getCoupon(obj)">{{obj.canTake?'立即领取':obj.status==1?'已领取':obj.status==2?'已使用':'已失效'}}
				</view>
				<text v-if="obj.validityType === 2">有效期：领取后 {{ obj.fixedEndTerm }} 天内可用</text>
				<text v-else>
					有效期: {{ timeFormat(obj.validStartTime, 'yyyy-mm-dd') }} 至{{ timeFormat(obj.validEndTime, 'yyyy-mm-dd') }}
				</text>
			</view>
			<view class="cd_top_contain2">
				<view><text>优惠券类型</text><text>{{obj.discountType === 1 ? '满减券' : '折扣券' }}</text></view>
			</view>
		</view>
		<view>
			<view class="cd_top_contain3">
				<view>适用商品</view>
				<view v-if="obj.productScope==2">
					<view @click="toGoods(item.goods.id)" v-for="(item, index) in lists" :key="index"
						class="cd_top_contain3_item">
						<image :src="item.goods.mainPic" mode="aspectFill"></image>
						<view
							style="width: 480rpx;margin-left: 30rpx;display: flex;flex-direction: column;height: 200rpx;position: relative;">
							<text style="color: #333;font-size: 28rpx;font-weight: bolder;">{{ item.goods.name }}</text>
							<text style="margin-top: 30rpx;color: #f00;">￥{{fen2yuan(item.sku[0].buyPrice)}}</text>
							<view class='li_buy'>立即购买</view>
						</view>
					</view>
				</view>
				<view v-if="obj.productScope==1"
					style="font-size: 36rpx;font-weight: bold;color: #333;display: flex;align-items: center;justify-content: center;width: 710rpx;height: 300rpx;letter-spacing: 20rpx;">
					全场通用
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	var that = ''
	import {
		timeFormat
	} from '../../unit/utils.js'
	export default {
		data() {
			return {
				id: '',
				obj: '',
				lists: [],
				index: 1
			}
		},
		onLoad(e) {
			that = this
			this.index = e.index
			this.id = e.id
			if (this.index == 1) {
				this.getCouponMethod()
			} else {
				this.getCouponTemplateMethod()

			}

		},
		methods: {
			timeFormat,
			fen2yuan(price) {
				return (price / 100.0).toFixed(2);
			},
			getCoupon(e) {
				if(e.status==2||e.status==3)return
				if (!uni.getStorageSync('phone')) {
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
				} else {
					this.$u.api.takeCoupon({
						"mobile": uni.getStorageSync('phone'),
						"channel":'Channel_ZFB',
						"templateId": e.id //数量
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '领取成功',
								icon: 'none',
								duration: 2000
							})
							this.getCouponTemplateMethod()
						}
					})
				}
			},
			getCouponTemplateMethod() {
				this.$u.api.getCouponTemplate({
					"id": this.id,
					"channel":'Channel_ZFB',
					"mobile": uni.getStorageSync('phone'),
				}).then(res => {
					this.obj = res.data
					this.cardModelDetailsMethod(this.obj.productScopeValues.toString())
				})
			},
			getCouponMethod() {
				this.$u.api.getCoupon({
					"id": this.id,
					"channel":'Channel_ZFB',
					"mobile": uni.getStorageSync('phone'),
				}).then(res => {
					this.obj = res.data
					this.cardModelDetailsMethod(this.obj.productScopeValues.toString())
				})
			},
			cardModelDetailsMethod(e) {
				this.$u.api.cardModelDetails({
					"goodsIds": e,
				}).then(res => {
					this.lists = res.data
				})
			},
			toGoods(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?goodsId=' + e
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.cd_top_contain3 {
		width: 750rpx;
		padding: 20rpx;
		background-color: #fff;

		.cd_top_contain3_item {
			width: 710rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.li_buy {
		width: 120rpx;
		margin-top: 30rpx;
		background: linear-gradient(90deg, #FF3101, #FF8265);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		height: 50rpx;
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.cd_top {
		width: 750rpx;
		height: 750rpx;
		background: linear-gradient(180deg, #FF3300, rgba(255, 48, 0, 0.6), #ff3000, #fff);
		padding-top: 50rpx;

		.cd_top_contain1 {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			background-color: #fff;
			margin-left: 325rpx;
		}

		.cd_top_contain {
			width: 710rpx;
			background-color: #fff;
			-webkit-mask: radial-gradient(circle at 20rpx 100%, #0000 20rpx, red 0) -20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 10rpx;
			margin-left: 20rpx;
			margin-top: -50rpx;
			border-bottom: 1rpx solid #F7B7A8;

			text:nth-child(1) {
				color: #333;
				font-size: 40rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-weight: bold;
				margin-top: 100rpx;
			}

			text:nth-child(2) {
				color: #333;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			view:nth-child(3) {
				width: 300rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				height: 80rpx;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}
			
			.ligth {
				background: linear-gradient(90deg, #FF3607, #FFA18B);
				color: #fff;
			}
			
			.dark {
				background: #999;
				color: #fff;
			}

			text:nth-child(4) {
				color: #999999;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}

		}

		.cd_top_contain2 {
			width: 710rpx;
			background-color: #fff;
			margin-left: 20rpx;
			-webkit-mask: radial-gradient(circle at 20rpx 0%, #0000 20rpx, red 0) -20rpx;
			border-radius: 10rpx;
			padding: 40rpx 30rpx 40rpx 30rpx;

			view {
				width: 650rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333;
				font-size: 28rpx;
			}
		}
	}
</style>